import { useEffect, useState } from "react"
function Tiker() {
    const [tip, setTip] = useState("发送验证码")
    const [seconds, setSeconds] = useState(30)
    // 定义执行开始时间
    function toker() {
        /*
        当seconds变化时 useEffect才会被执行
        然后 倒计时开始
        */
        setSeconds(seconds - 1);
        setTip(seconds + "s")
    }
    useEffect(() => {
        /*
        因为 程序一上来 会执行一次 useEffect
        所以 开始前先返回，不执行倒计时内容
        */
        if (seconds == 30) {
            return
        }
        // 定义定时器赋值给一个变量，方便清除定时器
        var ind = setInterval(() => {
            // 倒计数 减 1
            setSeconds(seconds - 1);
            /*
            倒计数减到0时：
                清除定时器
                修改显示文本
                重新赋值 倒计数值
            */
            if (seconds <= 0 || seconds == 30) {
                clearInterval(ind)
                setTip("重新发送")
                setSeconds(30)
            } else {
                // 显示现在是多少秒
                setTip(seconds + "s")
            }
        }, 1000)
        /*
        这里return 的函数，执行的是
            1，更新前
            2，卸载后
        */
        return () => {
            clearInterval(ind)
            console.log("更新前", seconds)
        }
    }, [seconds])
    return (<button disabled={seconds < 30} onClick={toker}>{tip}</button>);
}

export default Tiker;